<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
</head>
<body>

<h2>用户列表展示</h2>
<div id="app">
    <table width="30%" border="1px">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>密码</th>
            <th>操作</th>
        </tr>

        <tr v-for="u in list">
            <td>{{u.id}}</td>
            <td>{{u.username}}</td>
            <td>{{u.password}}</td>
            <td><a :href="'user/delete.do?id=' + u.id">删除</a>
                <a href="#" @click="findById(u)">编辑</a></td>
            <!--<td><button @click="delete(u.id)" value="删除"></button></td>-->
        </tr>
    </table>

    <hr>

    <input name="id" v-model="user.id"/> <br>
    <input name="username" v-model="user.username"/> <br>
    <input name="password" v-model="user.password"/> <br>
</div>
</body>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>

    //使用vue请求所有用户信息
    new Vue({
        el: "#app",
        data: {
            list: [],
            user: {}
        },
        methods: {
            findAll: function () {
                axios.get("user/findAll.do").then(response => {
                    this.list = response.data
                });
            },
            findById: function (u) {
                this.user = u;
            }
        },
        created: function () {
            this.findAll();
        }
    });


</script>

</html>